<template>
  <div>

    <el-card class="box-card">

      <div slot="header" class="clearfix">
        <span>订单</span>
      </div>


      <el-form :model="orderForm" ref="formName"  :rules="orderRules" label-width="80px">

        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号" prop="code">
              <el-input v-model="orderForm.code" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户" prop="customerId">
              <el-select v-model="orderForm.customerId" placeholder="请选择">
                <el-option
                  v-for="item in customerList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系人" prop="linkmanId">
              <el-select v-model="orderForm.linkmanId" placeholder="请选择" value="">
                <el-option
                  v-for="item in linkmanList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电话" prop="linkmanTel">
              <el-input v-model="orderForm.linkmanTel" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="税率" prop="taxRate">
              <el-input v-model="orderForm.taxRate" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">
            <el-button size="small" type="primary" @click="dialogVisible1=true">上传BOM</el-button>
            <!-- <el-upload
               class="upload-demo"
               action="/api/orderItem/importBom"
               :headers="auth"
               :on-success="uploadExcelSuccess">

               <div slot="tip" class="el-upload__tip"></div>
             </el-upload>-->
          </el-col>
          <el-col :span="2">
            <el-button size="small" type="primary" @click="importPic">上传图纸</el-button>
          </el-col>
        </el-row>
      </el-form>


      <el-dialog title="上传BOM" :visible.sync="dialogVisible1" width="30%">

        <el-upload
          class="upload-demo"
          drag
          action="/api/orderItem/importBom"
          :headers="auth"
          :on-success="uploadExcelSuccess"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip"></div>
        </el-upload>

      </el-dialog>



      <el-dialog
        :visible.sync="dialogVisible"
        width="30%">

        <el-upload
          class="upload-demo"
          ref="upload"
          :action="'/api/order-pic/upload?code='+this.orderForm.code"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :headers="auth"
          :file-list="fileList"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" >上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip"></div>
        </el-upload>


      </el-dialog>






      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="编号"
          width="180">
          <template slot-scope="scope">
            <a :href="'http://localhost:8080/order-pic/preview/'+orderForm.code+'/'+scope.row.code" target="_blank">{{scope.row.code}}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="零件名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="num"
          label="生产数量">
        </el-table-column>
      </el-table>

      <el-row style="left: 500px">
        <el-button @click="resetForm('linkForm')">重置</el-button>
        <el-button @click="saveOrder" type="primary">保存</el-button>
      </el-row>

    </el-card>


  </div>
</template>

<script>
  export default {
    name: "OrdersAdd",
    data(){
      return{
        orderForm:{linkmanTel:null},
        tableData:[],
        auth:{token:null},
        customerList:[],
        linkmanList:[],
        dialogVisible:false,
        dialogVisible1:false,
        fileList:[],
        orderRules: {
          customerId: [
            { required: true, message: '请选择客户', trigger: 'blur' }
          ],
          linkmanId: [
            { required: true, message: '请选择联系人', trigger: 'blur' }
          ]
        }
      }
    },
    methods:{
      //点击图片上传
      importPic:function(){
        this.dialogVisible=true;
      },
      //查询客户所有列表
      searchCustomer:function(){
        debugger;
        this.$http.get("/customer/getList").then((res)=>{
          this.customerList=res.data.result;
        });
      },
      //上传BOM
      uploadExcelSuccess:function (res, file) {

        if(res){
          this.tableData=res.result;
          this.searchCustomer();
          this. dialogVisible1=false;
        }
      },
      coedWork:function () {
        this.$http.get("/orders/getCode").then((res)=>{
          //  this.linkmanList=res.data.result;
          this.orderForm.code=res.data;
        });
      },

      submitUpload() {
        debugger;
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();

      },
      saveOrder:function () {
        debugger;
        var user=JSON.parse(sessionStorage.getItem("user"));
        this.orderForm.tbId=user.id;
        this.orderForm.updateUser=user.id;
        this.$refs['formName'].validate((valid)=>{
          if(valid){
            if(this.tableData.length>0){
              this.$http.post("/orders/saveOrder",{piOrder:this.orderForm,piOrderItems:this.tableData}).then((res)=>{
                if (res.data.success) {
                  this.$message({
                    message: res.data.message,
                    type: 'success'
                  });
                } else {
                  this.$message.error(res.data.message);
                }
                this.$router.push("/OrderList");
              })
            }else{
              this.$message.error("请上传BOM文件")
              return
            }
          }else{
            return
          }
        })

      }
    },
    mounted() {
      this.auth.token = sessionStorage.getItem("token");
      this.coedWork();
      this.searchCustomer();

    },
    watch:{
      'orderForm.customerId':function () {
        //alert(this.orderForm.customerId);
        debugger;
        this.$http.get("/customer/find/"+this.orderForm.customerId).then((res)=>{
          //  this.linkmanList=res.data.result;
          this.orderForm.taxRate=res.data.result.taxRate;

        });
        this.$http.get("/linkMan/getList/"+this.orderForm.customerId).then((res)=>{
          this.linkmanList=res.data.result;
          //this.orderForm.taxRate=res.data.result.taxRate;
        });

      },
      'orderForm.linkmanId':function (id) {
        debugger;
        this.$http.post("/linkMan/getMan/"+id).then((res)=>{
          // alert(res.data.result.tel);
          debugger;
          this.orderForm.linkmanTel=res.data.result.tel;
        });
      }
    }
  }
</script>

<style scoped>

</style>
